<template>
	<view class="h-full">
		<view class="boxSty">
			<div>
				<view class="w100p flex-item oh" style="position: relative;z-index: 1">
					<scroll-view scroll-y class="w100p scroll-Y">
						<view class="w100p swiper_video car_video">
							<swiper class="w100p swiper" :disable-touch="stopTouchMove" :current="swiperCurrent" @change="swiperChange"
								circular :indicator-dots="true" indicator-color="#9B969A" indicator-active-color="#fff" circular="true">
								<swiper-item v-for="item in swiperListVideo" :key="item">
									<view class="pr video_wrap" >
										<video id="myVideo" class="w100p  palyxxx" :src="item" :show-center-play-btn="true"
											object-fit="cover" play-btn-position="center" :controls="true" :autoplay="true" muted
											:poster="item">
										</video>
										<view class="video-wrapxx">
											<image :src="swiperList[0]" mode="aspectFill"></image>
										</view>
										<cover-view v-show="isShow" class="pa play_wrap" @click="playsHeader(item)">
											<view class="icon_wrap">
												<u-icon name="play-right-fill" color="#fff" size="46"></u-icon>
											</view>
										</cover-view>
									</view>
								</swiper-item>
								<swiper-item  v-for="item in swiperList" :key="item">
									<image class="w100p img"  :src="item" mode="aspectFill"></image>
								</swiper-item>
								
							</swiper>
						</view>
						<!-- <view class="pt_swiper"></view> -->
						<view :style="[getTopHeight()]"></view>
					</scroll-view>
				</view>
				<div :style="`position: fixed;z-index: 150;top: ${statusBarHeight + 15}px;`" class="flex between w-full">
					<div class="back center" @click="back"> 
						<image src="../../../static/icon/back.png" mode="" class="w-20 h-30"></image>
					</div>
					<div class="flex-start operateBox">
						<view class="operateBg" @click="goToZan">
							<image v-if="zanFlag" src="../../../static/icon/thumbs-uped.png" mode="" class="w-40 h-35"></image>
							<image v-else src="../../../static/icon/thumbs-up.png" mode="" class="w-40 h-35"></image>
						</view>
						<view class="operateBg ml-25" @click="getGuanZhuCollect">
							<image v-if="collectFlag" src="../../../static/icon/collected.png" mode="" class="w-40 h-35"></image>
							<image v-else src="../../../static/icon/collect.png" mode="" class="w-40 h-35"></image>
						</view>
					</div>
				</div>
			</div>
		</view>
		
		<view class="bg-white pl-34 pr-34 w-full rounded-20" style="margin-top: -30rpx;position: relative;z-index: 10;">
			 <view class="between" @click="goPerson">
				 <view class="flex" style="width: 500rpx;">
					<image :src="getImageUrl(get(allInfo, 'user.avatar'))" mode="widthFix" class="w-90 h-90 mt-40"></image>
					<view class=" mt-40 ml-22">
						<view class="overflowSty sfsfsfs">
							<image src="../../../static/card/zh.png" mode="" class="w-35 h-25 ml-10"></image>
							<span class="fz34 font-bold ml-5" style="color: #262728;" v-if="langR == 'zh'">{{get(allInfo, 'user.username')}}</span>
							<span class="fz34 font-bold ml-5" style="color: #262728;" v-else>{{get(allInfo, 'user.username_ru')}}</span>
						</view>
						<view class="busiBox">
							<!-- <image src="../../../static/images/user/newUI/whiteColdImg.png" mode="" class="w-full h-full"></image>
							<image src="../../../static/images/user/newUI/whiteGoldIcon.png" mode="" class="w-25 h-25 iconSty"></image> -->
							<!-- level = 0普通1黄金2铂金3钻石 -->
							 <image :src="`../../..//static/menmber/${plang('viphj')}.png` "mode="" class=" h-25 iconSty"
							 v-if="get(allInfo, 'user.level') == 1"
							 ></image> 
							 <image :src="`../../..//static/menmber/${plang('vipbj')}.png` "mode="" class=" h-25 iconSty"
							 v-if="get(allInfo, 'user.level') == 2"
							 ></image> 
							 <image :src="`../../..//static/menmber/${plang('vipzs')}.png` "mode="" class="h-25 iconSty"
							 v-if="get(allInfo, 'user.level') == 3"
							 ></image> 
							
						</view>
					</view>
				 </view>
				 <view class="" @click.stop="getGuanZhu" v-if="langR == 'zh'">
					 <view v-if="attentionFlag" class="followBox">
						<p class="pl-30 pr-30">{{$t('已关注')}}</p>	
					 </view>
					 <view v-else class="followBox">
						<p class="pl-30 pr-30">+ {{$t('关注')}}</p>	
					 </view>
				 </view>
				 <view class="" @click.stop="getGuanZhu" v-if="langR == 'ru'">
					 <view v-if="attentionFlag" class="followBox">
						<p class="pl-4 pr-4">+ {{$t('关注')}}</p>	
					 </view>
					 <view v-else class="followBox">
						<p class="pl-4 pr-4">{{$t('已关注')}}</p>	
					 </view>
				 </view>
			 </view>
			 <view class="center mt-45 pb-40">
			 	<view class="inlineBox" @click="callPhone">
			 		{{$t('打电话')}}
					 <image
								src="/static/translatexx.png"
								class="translatexxxxxx"
								mode="widthFix"
							/>
			 	</view>
			 	<view class=" callPhoneSty ml-30" @click="inlineTalk">
			 		{{$t('在线聊')}}
			 	</view>
			 </view> 
		</view>
		
		<u-modal :confirm-text="$t('确定')"  :cancel-text ="$t('取消')"  class="modalSty" v-model="showTel" :content="content" :showCancelButton="true" @cancel="showTel = false" @confirm="confirmTel"></u-modal>
		<view class=" bg-white pl-34 pr-34 pb-40" style="border-radius: 26rpx 26rpx 0 0 ;position: relative;z-index: 10;">
			<view class="flex-start pt-45">
				<view class="" v-for="(item ,index) in infoTitle" class="ml-50 commonTitle" :class="{activeTitle: current == index}" @click="changeTitle(index)">
					{{item}}
				</view>
			</view>
			<view v-if="current == 0" class="pb-150">
				<p class="text-010 fz30 mt-40 font-bold">{{ allInfo[plang('title')] }}</p>
				<p class="fz28 text-333 mt-24">{{ allInfo[plang('content')] }}</p>
			</view>
			<!-- <view v-if="current == 1" class="">
				<p class="fz28 text-333 mt-24" style="background-color: #F7F7F7;min-height: 300rpx;">{{  }}</p>
			</view>
			<view v-if="current == 2" class="line-h50">
				<p class="fz24 text-333 mt-24">千艺团队拥有丰富的项目经验，以企业形象设计与品牌创意为主，并结合企业与品牌的商业价值，服务国内多行业类型的品牌，合理的收费，有效协助品牌整体规划，我们通过严谨的思维与用心的执行成功.</p>
			</view> -->
			<view v-if="current == 1" class="mt-20 pb-70">
				<view class="ml-24 mr-24 flex-start mt-50" v-for="item in commontList">
					<!-- 一级 -->
					<image :src="getImageUrl(get(item, 'member.avatar'))" mode="aspectFill" class="w-65 h-65"></image>
					<view class="ml-24">
						<!-- 一级 -->
						<span  class="fz24" style="color: #ADADAD;" v-if="langR == 'zh'">{{get(item, 'member.username')}}</span>
						<span  class="fz24" style="color: #ADADAD;" v-else>{{get(item, 'member.username_ru')}}</span>
						<span v-if="allInfo.user_id == item.member_id" class="w-60 h-30 ml-10" style="display: inline-block;background-color: #FFEDF0;color: #F53F3F;border-radius: 500rpx;line-height: 30rpx;text-align: center;font-size: 17rpx;">{{$t('作者')}}</span>
						<p class="fz24 text-333 mt-15">{{item[plang('content')]}}</p>
						<view class="mt-15">
							<span class="fz20" style="color: #ADADAD;">{{item.add_time}}</span>
							<span class="fz20 ml-20" style="color: #ADADAD;" @click="replaySec(item, 2, '')"  v-if="item.type != 3">{{$t('回复')}}</span>
							<span v-if="allInfo.user_id == userId || userId == item.member_id" class="fz20 ml-20" style="color: #ADADAD;" @click="delReply(item)">{{$t('删除')}}</span>
						</view>
						<!-- 二级 -->
						<view class="mt-20" v-for="itemSecond in item.comment">
							<view class=" flex-start">
								<image :src="getImageUrl(get(itemSecond, 'member.avatar'))" mode="aspectFill" class="w-40 h-40 vam"></image>
								<view class="ml-24">
									<span  class="fz24" style="color: #ADADAD;" v-if="langR == 'zh'">{{get(itemSecond, 'member.username')}}</span>
									<span  class="fz24" style="color: #ADADAD;" v-else>{{get(itemSecond, 'member.username_ru')}}</span>
						<span v-if="allInfo.user_id == itemSecond.member_id" class="w-60 h-30 ml-10" style="display: inline-block;background-color: #FFEDF0;color: #F53F3F;border-radius: 500rpx;line-height: 30rpx;text-align: center;font-size: 17rpx;">{{$t('作者')}}</span>
									<p class="fz24 text-333 mt-15">{{itemSecond[plang('content')]}}</p>
									<view class="mt-15">
										<span class="fz20" style="color: #ADADAD;">{{itemSecond.add_time}}</span>
										<span class="fz20 ml-20" style="color: #ADADAD;" @click="replaySec(itemSecond ,3, item.id)" v-if="itemSecond.type != 3">{{$t('回复')}}</span>
										<span v-if="allInfo.user_id == userId || userId == itemSecond.member_id" class="fz20 ml-20" style="color: #ADADAD;" @click="delReply(itemSecond)">{{$t('删除')}}</span>
									</view>
								</view>
						
							</view>
								<!-- 三级 和二级摆放在同一级 -->
								<view class="mt-20 flex-start" v-for="itemThird in itemSecond.comment" style="padding-left: 30rpx;">
									<image :src="getImageUrl(get(itemThird, 'member.avatar'))" mode="aspectFill" class="w-40 h-40 vam"></image>
									<view class="ml-24">
										<span  class="fz24" style="color: #ADADAD;" v-if="langR == 'zh'">{{get(itemThird, 'member.username')}}</span>
										<span  class="fz24" style="color: #ADADAD;" v-else>{{get(itemThird, 'member.username_ru')}}</span>
										<span v-if="allInfo.user_id == itemThird.member_id" class="w-60 h-30 ml-10" style="display: inline-block;background-color: #FFEDF0;color: #F53F3F;border-radius: 500rpx;line-height: 30rpx;text-align: center;font-size: 17rpx;">{{$t('作者')}}</span>
										<p class="fz24 text-333 mt-15" >{{itemThird[plang('content')]}}</p>
										<view class="mt-15">
											<span class="fz20" style="color: #ADADAD;">{{itemThird.add_time}}</span>
											<span class="fz20 ml-20" style="color: #ADADAD;" @click="replaySec(itemThird, 3, itemSecond.id)"  v-if="itemThird.type != 3">{{$t('回复')}}</span>
											<span v-if="allInfo.user_id == userId || userId == itemThird.member_id" class="fz20 ml-20" style="color: #ADADAD;" @click="delReply(itemThird)">{{$t('删除')}}</span>
										</view>
									</view>
								</view>
					
						</view>
					</view>
				</view>
			</view>
		</view> 
		<!-- <view class=" bg-white pb-45 pl-34 pr-34 mt-20" style="border-radius: 26rpx 26rpx 0 0 ; margin-top: -50rpx;z-index:10;position: relative;">
			<view class="mt-50" style="margin-top: -30rpx;">
				<p class="text-010 fz30 pt-30 font-bold">{{ allInfo.title }}</p>
			</view>
			<p class="fz28 text-333 mt-24 lh-48">{{ allInfo.content }}</p> 
		</view> -->
		
		<view v-if="replayFlag" class="replaySty">
			<p class="ml-20" @click="replayFlag = false">❌</p>
			<p class="ml-20">{{$t('回复')}}：{{replayUser}}</p>
			
		</view>
		<view class="footer_btn4">
			
			<u-input
				v-model="valueComment"
				type="text" :border="false"
				:height="60" :auto-height="true"
				class="inputSty"
				:placeholder="$t('真实发声,言之有物')"
				@confirm="sendComment(valueComment)"
			/>
			<view class="ml-20 flex center" @click="goToZan">
				<image v-if="zanFlag" src="../../../static/icon/thumbs-uped.png" mode="" class="w-40 h-35"></image>
				<image v-else src="../../../static/icon/goodIcon.png" mode="widthFix" class="w-40 h-35"></image>
				<span class="fz24 text-3b3 ml-5">{{ zan_count }}</span>
			</view>
			<view class="ml-20 flex center" @click="getGuanZhuCollect">
				<image v-if="collectFlag" src="../../../static/icon/collected.png" mode="" class="w-40 h-35"></image>
				<image v-else src="../../../static/icon/collectIcon.png" mode="widthFix" class="w-40 h-35"></image>
				<span class="fz24 text-3b3 ml-5">{{guanzhu_num}}</span>
			</view>
			<view class="ml-20 mr-20">
				<image src="../../../static/icon/commentIcon.png" mode="widthFix" class="w-45 vam"></image>
				<span class="fz24 text-3b3 ml-5">{{comment_count}}</span>
			</view>
		</view>
		<!-- <u-modal v-model="showInfo" :content="contentInfo"  @confirm="showInfo = false"></u-modal> -->
		<!-- 播放视频 -->
		<uni-popup ref="popupVideo" type="center" background-color="#000" mask-background-color="#000" class="popvexxx">
			<view class="wrapper-video" >
				<video id="mainVideo" :src="playVideo" :show-center-play-btn="true" object-fit="cover"
					play-btn-position="center" :controls="true" :autoplay="true" class="video-main" :show-fullscreen-btn="false">
				</video>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { payScore, lookatZan, operateZan, getGuanZhu, getIsGuanZhu, userGroup, watchComment, delComment, sendComment, getGuanZhuNumber, request_minute } from '@/api/basic'
	import { chechkIm } from '@/api/basic'
	export default {
		data() {
			return {
				productFlag: true,
				showUserInfo: false,
				zanFlag: false,
				collectFlag: false,
				attentionFlag: false,  
				groupId: '',
				commontList: [],
				isShow: true, // 播放按钮是否显示
				stopTouchMove: false, // 轮播是否禁止滑动
				isEllipsis: true, // 是否溢出隐藏
				closeVideo: true,
				statusBarHeight: uni.getStorageSync("statusBarHeight"),
				valueComment: '',
				swiperCurrent: 0,
				replayFlag:false,
				typeKey: '',
				userId: uni.getStorageSync("user_id"),
				itemInfo: {},
				replayUser: '',
				current: 0,
				comment_count: 0,
				allInfo:{},
				showInfo: false,
				topId: '',
				content: '',
				contentInfo: {},
				showTel: false,
				IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
				swiperList: [],
				swiperListVideo: [],
				infoTitle: [this.$t('服务内容'), this.$t('用户评论')],
				zan_count: 0,
				guanzhu_num: 0,
				playVideo:'',
				
			}
		},
		onLoad(options) {
			this.allInfo = uni.getStorageSync('lifeDetail')
			// this.allInfo = JSON.parse(options.item)
			console.log('8899988888888', this.allInfo)
			if (this.allInfo.images.length > 0) {
				this.allInfo.images.map(item => {
					this.swiperList.push(this.getImageUrl(item))
				})
				console.log(this.swiperList,'55555555555555555')
			}
			if (this.allInfo.videos && this.allInfo.videos.length > 0) {
				this.swiperListVideo.push(this.getImageUrl(this.allInfo.videos))
				this.playVideo = this.getImageUrl(this.allInfo.videos[0])
			}
			console.log('this.swiperListVideo', this.swiperListVideo)
			this.jjVideoCtx = uni.createVideoContext('jjVideo');
			this.videos = uni.createVideoContext('myVideo');

			window.onNativeHide  =()=>{
				uni.removeStorageSync("lifeDetail")
			}
		  },
		  mounted() {
				this.userGroup()
		  		this.getIsGuanZhu()
				this.lookatZan()
				this.getGuanZhuNumber()
				this.watchComment()
		  },
		methods: {
			goPerson() {
				if (this.allInfo.identity_type == 0) {
					uni.navigateTo({
						url: `/pages/details/merchantDetail?bid=${this.allInfo.bid}`,
						webview: 'zWebViewShop'
					})
				} else {
					uni.navigateTo({
						url: `/pages/myPersonPage/index?targetUserId=${this.allInfo.user_id}`,
						webview: 'zWebView'
					})
				}
			
			},
			getTopHeight() {
				 return {marginTop: `calc(780rpx)`}
			},
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			// 播放头部视频
			playsHeader(video) {
				// 判断安卓
				const systemInfo = uni.getSystemInfoSync();
				// 判断是否为 Android 系统
				if (systemInfo.platform === 'android') {
					this.playVideo = video;
					this.$refs.popupVideo.open()
					return;
				}
			
				this.videos.requestFullScreen();
				this.$nextTick(() => {
					this.videos.play();
				})
			},

			back() {
				uni.navigateBack()
			},
			callPhone() {
				if(uni.getStorageSync("user_id") == this.allInfo.user_id) {
					uni.showToast({
						title: this.$t('不能给自己打电话'),
						icon: "none",
					});
				} else {
					request_minute({
						user_id: uni.getStorageSync("user_id"),
						target_id: this.allInfo.user_id,
					}).then(res => {
						// this.showInfo = true
						// this.contentInfo = res
						if (res.data.data.flag == 1) {
							this.isMessageGo({
								action: 'call',
								data: {
									userId: this.allInfo.user_id,
									type: res.data.data.type || 1,
								}
							})
						} else {
							uni.showToast({
								title: this.$t('积分不足，请充值积分'),
								icon: "none",
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/vip/scorePoint',
									webview: 'zWebView'
								})
							}, 500)
						}
						console.log('res0000', res)
					})
				}
				
			},
			inlineTalk() {
				console.log('9999')
				// this.isMessageGo({
				// 	action: 'initiateChat',
				// 	data: this.allInfo.user_id
				// })

				
				if(uni.getStorageSync("user_id") ==this.allInfo.user_id) {
						uni.showToast({
							title: this.$t('不能和自己聊天'),
							icon: "none",
						});
					} else {
						this.isMessageGo({
							action: 'initiateChat',
							data:this.allInfo.user_id
						})
						return;
						chechkIm({
							send_uid: uni.getStorageSync("user_id"),
							receive_uid:this.allInfo.user_id,
						}).then(res => {
							if (res.data.code == 1) {
								this.isMessageGo({
									action: 'initiateChat',
									data:this.allInfo.user_id
								})
							} else {
								if (res.data.data.send_user == false) {
									uni.$u.toast(this.$t('积分不足，请充值积分'))
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/vip/scorePoint',
										})
									}, 500)
								} else {
									uni.$u.toast(this.$t('对方积分不足'))
								}
							}
						})
					}
			},
			confirmTel() {
				uni.makePhoneCall({
					phoneNumber: this.allInfo.user.mobile || ''
				})
				this.showTel = false
			},
			userGroup() {
				userGroup({
					user_id: uni.getStorageSync("user_id"),
					type: 1,
				}).then(res => {
					res.data.data.map(item => {
						if(item.title == '未分组') {
							this.groupId = item.id
						}
					})
				})
			},
			// 查看是否关注和收藏
			getIsGuanZhu() {
				// 查看是否关注
				getIsGuanZhu({
					user_id: uni.getStorageSync("user_id"),
					guanzhu_id: this.allInfo.user_id,
					type: 1,
					release_type: 'user'
				}).then(res => {
					if(res.data.data == 1) {
						this.attentionFlag = false
					} else {
						this.attentionFlag = true
					}
				})
				// 查看是否收藏
				getIsGuanZhu({
					user_id: uni.getStorageSync("user_id"),
					guanzhu_id: this.allInfo.id,
					type: 2,
					release_type: 'lifead'
				}).then(res => {
					if(res.data.data == 1) {
						this.collectFlag = false
					} else {
						this.collectFlag = true
					}
				})
			},
			getGuanZhuNumber() {
				getGuanZhuNumber({
					user_id: uni.getStorageSync("user_id"),
					guanzhu_id: this.allInfo.id,
					type: 2,
					release_type: 'lifead'
				}).then(res => {
					this.guanzhu_num = res.data.data
				})
			},
			// 关注操作
			getGuanZhu() {
				getGuanZhu({
					user_id: uni.getStorageSync("user_id"),
					guanzhu_id: this.allInfo.user_id,
					type: 1,
					release_type: 'user',
					group_id: this.groupId
				}).then(res => {
					this.getIsGuanZhu()
				})
			},
			// 收藏操作
			getGuanZhuCollect() {
				getGuanZhu({
					user_id: uni.getStorageSync("user_id"),
					guanzhu_id: this.allInfo.id,
					type: 2,
					release_type: 'lifead',
					group_id: this.groupId
				}).then(res => {
					this.getIsGuanZhu()
					this.getGuanZhuNumber()
				})
			},
			// 查看是否点赞
			lookatZan() {
				lookatZan({
					user_id: uni.getStorageSync("user_id"),
					zan_id: this.allInfo.id,
					type: 2,
					release_type: 'lifead'
				}).then(res => {
					console.log('888888', res)
					this.zan_count = res.data.data.count
					if(res.data.data.data == 400) {
						this.zanFlag = false
					} else {
						this.zanFlag = true
					}
				})
			},
			// 进行点赞
			goToZan() {
				operateZan({
					user_id: uni.getStorageSync("user_id"),
					zan_id: this.allInfo.id,
					type: 2,
					release_type: 'lifead'
				}).then(res => {
					if(res.data.data == 200) {
						this.lookatZan()
					}
				})
			},
			successFun() {
				uni.navigateTo({
					url: '/pages/tabbar/newUser/Mall/mallSuccess'
				})
			},
			changeTitle(index) {
				if(index == 1) {
					this.watchComment()
				}
				this.current = index
			},
			// 查看评论
			watchComment() {
				uni.showLoading({
					title: this.$t('加载中')
				});
				watchComment({
					release_id: this.allInfo.id,
					member_id: uni.getStorageSync("user_id"),
					release_type: 'lifead'
				}).then(res => {
					if (res.data.data.length == 0) {
						this.nomore = true
					} else {
						this.commontList = res.data.data.data
						this.comment_count = res.data.data.comment_count || 0
						console.log('66666666', this.commontList)
					}
					uni.hideLoading()
				})
			},
			sendComment(info) {
				if (info == '') {
					uni.$u.toast(this.$t('请输入评论内容'))
					return
				}
				uni.showLoading({
					title: this.$t('发送中')
				});
				sendComment({
					release_id: this.allInfo.id,
					member_id: uni.getStorageSync("user_id"),
					release_type: 'lifead',
					content: info,
					type: this.typeKey || 1,
					one_comment_id: this.topId || this.itemInfo.id || 0,
					comment_id: this.itemInfo.id || 0
				}).then(res => {
					if(res.data.data == 200) {
						uni.showToast({
							title: this.$t('发布成功')
						})
					}
					this.topId = '';
					this.itemInfo.id = '';
					this.typeKey = '';

					this.replayFlag = false
					this.valueComment = ''
					this.watchComment()
					uni.hideLoading()
				})
			},
			replaySec(item, key, topId) {
				this.replayUser = item.member[this.plang('username')]
				console.log('9990000', this.replayUser)
				this.itemInfo = item
				this.typeKey = key
				this.topId = topId
				this.replayFlag = true
			},
			delReply(delParams) {
				uni.showLoading({
					title: this.$t('删除中')
				});
				delComment({
					id: delParams.id,
					member_id: uni.getStorageSync("user_id")
				}).then(res => {
					if(res.data.data == 200) {
						uni.showToast({
							title: this.$t('删除成功')
						})
					}
					this.watchComment()
					uni.hideLoading()
				})
				
			}
		}
	}
</script>

<style lang="scss">
	@import "./shopDetail.scss";
	@import '@/assets/appScss.scss';
	page {
		// background-color: #F6F7FB;
	}
	.back {
		// position: absolute;
		width: 70rpx;
		height: 70rpx;
		// top: 50rpx;
	}
	.operateBox {
		// position: absolute; 
		// right: 20rpx;
		// top: 50rpx;
		margin-right:30rpx;
	}
	.operateBg {
		width: 56rpx;
		height: 56rpx;
		background-color: #0E0E0E;
		opacity: 0.6;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.titleSty {
		color: #262728;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 600;
		// padding-top: 34rpx;
		margin-left: 14rpx;
	}
	.formSty {
		padding-bottom: 200rpx;
		/deep/ .u-form-item__body {
			padding: 0;
		}
	}
	.contentBg {
		background-color: #fff;
		padding: 0 24rpx;
		// margin-left: 24rpx;
		// margin-right: 24rpx;
		border-radius: 18px;
		padding-bottom: 35rpx;
		/deep/ .u-form-item__body__right__message {
			margin-left: 0 !important;
		}
		/deep/ .u-icon__icon {
			font-size: 52rpx !important;
		}
		/deep/ .u-border-bottom{
			position: inherit;
		}
		/deep/ .u-add-wrap {
			// display: none !important;
			color: #D9D9D9;
			font-size: 20rpx;
		}
		/deep/ .u-add-tips {
			display: none !important;
		}
	}
	.boxSty {
		width: 100%;
		// height: 850rpx;
		// position: relative;
		// height: 600rpx;
		// background-image: url('../../../static/images/user/newUI/detsilIMage.png');
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
		.watchSty {
			// width: 100rpx;
			height: 35rpx;
			border-radius: 60rpx;
			background-color: rgba(14,14,14, 0.68);
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: #fff;
			font-size: 20rpx;
			// margin-right: 24rpx;
			// margin-bottom: 12rpx;
			bottom: 10rpx;
			right: 10rpx;
			position: absolute;
			z-index: 20;
			padding-right: 14rpx;
		}
		/deep/ .u-swiper-indicator {
			justify-content: flex-start !important; 
		}
		.swiperSty {
			/deep/ .u-swiper-image div {
				background-size: contain !important;
			}	
		}
		/deep/ uni-swiper .uni-swiper-dots-horizontal {
			bottom: 0 !important;
			left: 10% !important;
		}
	}
	.numberSty {
		color: #FF5A00;
		font-size: 48rpx;
		font-weight: 600;
		margin-top: 34rpx;
	}
	.transformSty {
		width: 122rpx;
		height: 46rpx;
		background-color: #F1F6FF;
		text-align: center;
		font-size: 26rpx;
		line-height: 46rpx;
		color: #7A929B;
		margin-top: 24rpx;
	}
	.replaySty {
		position: fixed;
		left:0;
		bottom: 120rpx;
		right: 0;
		color: #adadad;
		display: flex;
		justify-content: flex-start;
		z-index: 10;
		background-color: #DEE1EF;
	}
	.footer_btn4{
		position: fixed;
		height: 120rpx;
		left:0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		background: #fff;
		z-index: 20;
		.inputSty {
			width: 30%;
			border-radius: 30rpx;
			background-color: #F6F6F6;
			text-indent: 20rpx;
			margin-left: 15rpx;
		}
	}
	.busiBox {
		width: 121rpx;
		height: 28rpx;
		margin-top: 14rpx;
		position: relative;
		.iconSty {
			position: absolute;
			left: 6rpx;
			top: 3rpx;
			width: 190rpx;
			height: 48rpx;
		}
	}
	.overflowSty {
		// height: 100rpx;
		// white-space: nowrap;      /* 禁止文本换行 */
		// overflow: hidden;         /* 隐藏超出容器的内容 */
		// text-overflow: ellipsis;  /* 超出部分显示省略号 */
		width: 200px;            /* {{$t('设置')}}容器的宽度 */
		 display: -webkit-box;          /* 将元素设置为弹性盒子 */
		-webkit-box-orient: vertical;  /* 设置内容垂直排列 */
		-webkit-line-clamp: 2;         /* 限制显示的行数（这里是3行） */
		overflow: hidden;              /* 隐藏超出部分 */
		text-overflow: ellipsis;       /* 超出部分显示省略号 */
		height: 80rpx;                  /* 固定高度（根据行高和行数计算） */
		line-height: 36rpx;             /* 设置行高 */
		&.sfsfsfs {
			display: flex;
			align-items: center;
		}
	}
	.followBox {
		border: 1rpx solid #000;
		border-radius: 500rpx;
		// width: 134rpx;
		height: 52rpx;
		color: #333;
		font-size: 24rpx;
		font-weight: 600;
		text-align: center;
		line-height: 52rpx;
	}
	.callPhoneSty {
		background: linear-gradient(90deg, #FF7000 0%, #FFA245 100%);
		box-shadow: 0px 4px 13.8px 0px #DEE1EF;
		box-shadow: -2px -3px 9.9px 0px #FFBE7C inset;
		box-shadow: -4px 4px 6px 0px #FFCB9775 inset;
		width: 45%;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 26rpx;
		font-weight: 600;
		color: #fff;
		text-align: center;
		border-radius: 500rpx;
	}
	.inlineBox {
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		box-shadow: 0px 4px 13.8px 0px #DEE1EF;
		box-shadow: -2px -6px 9.9px 0px #71D0FF inset;
		box-shadow: -4px 5px 6.5px 0px #C8FBFF75 inset;
		width: 45%;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 26rpx;
		font-weight: 600;
		color: #fff;
		text-align: center;
		border-radius: 500rpx;
	}
	.commonTitle {
		font-size: 26rpx;
		color: #535353;
		height: 60rpx;
	}
	.commonTitle:first-child{
		margin-left: 0;
	}
	.activeTitle {
		font-size: 32rpx;
		color: #0E0E0E;
		font-weight: 600;
		border-bottom: 6rpx solid #278AFF;
	}
</style>
